<template>
	<div class="singlepage">
    <TopWithBack></TopWithBack>
		<div class="city_now_top">
        当前定位城市
    </div>
    <div class="city_now_name" @click="choosecurrent">
        <span>{{currentcity}}</span>
    </div>
    <div class="city_now_top">
        其他城市
    </div>
    <div class="citylists">
       <div class="aui-tab" id="tab">
          <div class="aui-tab-item" :class="isshow==1 && 'aui-active' ">{{selestate}}</div>
          <div class="aui-tab-item" :class="isshow==2 && 'aui-active' ">{{selecity}}</div>
          <div class="aui-tab-item" :class="isshow==3 && 'aui-active' ">{{seledistrict}}</div>
      </div>
      <div class="citylistli">
        <ul v-if="isshow == 1">
          <li v-for="(item,index) of provice" @click="choseProvice(index)">
              {{item.name}}
          </li>
        </ul>
        <ul v-if="isshow == 2">
          <li v-for="(item,index) of citys" @click="choseCity(index)">
              {{item.name}}        
          </li>
        </ul>
        <ul v-if="isshow == 3">
          <li v-for="(item,index) of area" @click = "choseArea(item)">
             {{item.name}}  
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import TopWithBack  from './../common/TopWithBack.vue'
import { loadCity } from '@/api/allapis'
export default{
  name: 'City',
  data(){
    return{
      currentcity:'洛阳',//当前城市
      selestate: "请选择省",//城市导航栏
      selecity: "请选择市",//城市导航栏
      seledistrict: "选择区/县",//城市导航栏
      isshow:1,//添加样式变量
      provice:[],//省份
      citys:[],//城市
      area:[],//地区
    }
  },
  mounted(){
    this.loaData()//拉取城市信息
  },
  methods:{
    //拉取地址信息
    loaData(){
      loadCity().then(response=>{
        this.provice = response.data.regions
        // console.log(JSON.stringify(response))
      })
    },
    //选择省份
    choseProvice:function(index){
      this.precityindex = index
      this.citys = this.provice[index].children
      this.isshow = 2
    },
    //选择城市
    choseCity:function(index){
      this.area = this.citys[index].children
      this.isshow = 3
    },
    //选择地区，未完成（选择地区后应切换地区）
    choseArea:function(item){
      this.$router.go(-1)
    },
    //未完成（选择当前城市确定选择地区）
    choosecurrent(){

    },

  },
  components:{
    TopWithBack,
  }
}
</script>
<style>
.singlepage{padding-top:50px;}
</style>



